<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Icon（Ant的双色风格）</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_diy.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style type="text/css">
.ant-btn{
	margin-left: 20px;
}
.aut-icon{
	height: 2em;
	width: 2em;
	/* color: red; */
}
.ant-modal-confirm-body>.ant-modal-confirm-title{
	flex: auto !important;
	margin-left: 8px;
}
.icon-demo{
	display: inline-block;
	background-color: #c6e2ff;
	border: 1px solid gray;
	padding: 4px 30px;
	margin: 8px;
}
.icon-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.icon-cell{
	display: flex;
	flex-direction: column;
	width: 170px;
	height: 90px;
	border: 1px solid lightgray;
	padding: 8px 0;
}
.icon-icon{
	margin: auto;
}
.icon-text{
	margin: auto;
	color: gray;
	font-size: 12px;
}
.label{
	margin: 12px;
	font-weight: bold;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">探索使用icons_antd.js（探索成功，推荐使用）</a-divider><!-- =============================================================== -->
	<p class="desc">其实就是把antd的图标注入到icons_antd.js文件中，用icon_el的方式调用就可以了</p>
	<a-button @click="confirm4">Confirm</a-button>
	<add-location width="80" height="40"></add-location>
	<aim width="80" height="40"></aim>
	<zoom-out width="80" height="40"></zoom-out>
	<up-circle-two-tone width="80" height="40"></up-circle-two-tone>
	<right-square-two-tone width="80" height="40"></right-square-two-tone>

	<a-divider class="a-divi" orientation="left">双色风格</a-divider><!-- =============================================================== -->
	<p class="desc" style="margin-top: 12px;">Antd双色风格图标</p>
	<a-affix :offset-top="top">
		<a href="icon_ant1.html"><a-button>线框风格</a-button></a>
		<a href="icon_ant2.html"><a-button>实底风格</a-button></a>
		<a href="icon_ant3.html"><a-button type="primary">双色风格</a-button></a>
		<div class="icon-demo"><p v-text="iconDemo" style="margin-top: 1em;"></p></div>
	</a-affix>
	
	<h4 class="label">方向性图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('up-circle-two-tone')"><div class="icon-icon"><up-circle-two-tone class="aut-icon"></up-circle-two-tone></div><div class="icon-text">UpCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('down-circle-two-tone')"><div class="icon-icon"><down-circle-two-tone class="aut-icon"></down-circle-two-tone></div><div class="icon-text">DownCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('left-circle-two-tone')"><div class="icon-icon"><left-circle-two-tone class="aut-icon"></left-circle-two-tone></div><div class="icon-text">LeftCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('right-circle-two-tone')"><div class="icon-icon"><right-circle-two-tone class="aut-icon"></right-circle-two-tone></div><div class="icon-text">RightCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('play-circle-two-tone')"><div class="icon-icon"><play-circle-two-tone class="aut-icon"></play-circle-two-tone></div><div class="icon-text">PlayCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('up-square-two-tone')"><div class="icon-icon"><up-square-two-tone class="aut-icon"></up-square-two-tone></div><div class="icon-text">UpSquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('down-square-two-tone')"><div class="icon-icon"><down-square-two-tone class="aut-icon"></down-square-two-tone></div><div class="icon-text">DownSquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('left-square-two-tone')"><div class="icon-icon"><left-square-two-tone class="aut-icon"></left-square-two-tone></div><div class="icon-text">LeftSquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('right-square-two-tone')"><div class="icon-icon"><right-square-two-tone class="aut-icon"></right-square-two-tone></div><div class="icon-text">RightSquareTwoTone</div></div>
	</div>
	
	<h4 class="label">提示建议性图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('question-circle-two-tone')"><div class="icon-icon"><question-circle-two-tone class="aut-icon"></question-circle-two-tone></div><div class="icon-text">QuestionCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('plus-circle-two-tone')"><div class="icon-icon"><plus-circle-two-tone class="aut-icon"></plus-circle-two-tone></div><div class="icon-text">PlusCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('pause-circle-two-tone')"><div class="icon-icon"><pause-circle-two-tone class="aut-icon"></pause-circle-two-tone></div><div class="icon-text">PauseCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('minus-circle-two-tone')"><div class="icon-icon"><minus-circle-two-tone class="aut-icon"></minus-circle-two-tone></div><div class="icon-text">MinusCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('plus-square-two-tone')"><div class="icon-icon"><plus-square-two-tone class="aut-icon"></plus-square-two-tone></div><div class="icon-text">PlusSquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('minus-square-two-tone')"><div class="icon-icon"><minus-square-two-tone class="aut-icon"></minus-square-two-tone></div><div class="icon-text">MinusSquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('info-circle-two-tone')"><div class="icon-icon"><info-circle-two-tone class="aut-icon"></info-circle-two-tone></div><div class="icon-text">InfoCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('exclamation-circle-two-tone')"><div class="icon-icon"><exclamation-circle-two-tone class="aut-icon"></exclamation-circle-two-tone></div><div class="icon-text">ExclamationCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('close-circle-two-tone')"><div class="icon-icon"><close-circle-two-tone class="aut-icon"></close-circle-two-tone></div><div class="icon-text">CloseCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('close-square-two-tone')"><div class="icon-icon"><close-square-two-tone class="aut-icon"></close-square-two-tone></div><div class="icon-text">CloseSquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('check-circle-two-tone')"><div class="icon-icon"><check-circle-two-tone class="aut-icon"></check-circle-two-tone></div><div class="icon-text">CheckCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('check-square-two-tone')"><div class="icon-icon"><check-square-two-tone class="aut-icon"></check-square-two-tone></div><div class="icon-text">CheckSquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('clock-circle-two-tone')"><div class="icon-icon"><clock-circle-two-tone class="aut-icon"></clock-circle-two-tone></div><div class="icon-text">ClockCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('warning-two-tone')"><div class="icon-icon"><warning-two-tone class="aut-icon"></warning-two-tone></div><div class="icon-text">WarningTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('stop-two-tone')"><div class="icon-icon"><stop-two-tone class="aut-icon"></stop-two-tone></div><div class="icon-text">StopTwoTone</div></div>
	</div>
	
	<h4 class="label">编辑类图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('edit-two-tone')"><div class="icon-icon"><edit-two-tone class="aut-icon"></edit-two-tone></div><div class="icon-text">EditTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('copy-two-tone')"><div class="icon-icon"><copy-two-tone class="aut-icon"></copy-two-tone></div><div class="icon-text">CopyTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('delete-two-tone')"><div class="icon-icon"><delete-two-tone class="aut-icon"></delete-two-tone></div><div class="icon-text">DeleteTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('snippets-two-tone')"><div class="icon-icon"><snippets-two-tone class="aut-icon"></snippets-two-tone></div><div class="icon-text">SnippetsTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('diff-two-tone')"><div class="icon-icon"><diff-two-tone class="aut-icon"></diff-two-tone></div><div class="icon-text">DiffTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('highlight-two-tone')"><div class="icon-icon"><highlight-two-tone class="aut-icon"></highlight-two-tone></div><div class="icon-text">HighlightTwoTone</div></div>
	</div>
	
	<h4 class="label">数据类图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('pie-chart-two-tone')"><div class="icon-icon"><pie-chart-two-tone class="aut-icon"></pie-chart-two-tone></div><div class="icon-text">PieChartTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('box-plot-two-tone')"><div class="icon-icon"><box-plot-two-tone class="aut-icon"></box-plot-two-tone></div><div class="icon-text">BoxPlotTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('fund-two-tone')"><div class="icon-icon"><fund-two-tone class="aut-icon"></fund-two-tone></div><div class="icon-text">FundTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('sliders-two-tone')"><div class="icon-icon"><sliders-two-tone class="aut-icon"></sliders-two-tone></div><div class="icon-text">SlidersTwoTone</div></div>
	</div>
	
	<h4 class="label">品牌和标识</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('html-5-two-tone')"><div class="icon-icon"><html-5-two-tone class="aut-icon"></html-5-two-tone></div><div class="icon-text">Html5TwoTone</div></div>
	</div>
	
	<h4 class="label">网站通用图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('account-book-two-tone')"><div class="icon-icon"><account-book-two-tone class="aut-icon"></account-book-two-tone></div><div class="icon-text">AccountBookTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('alert-two-tone')"><div class="icon-icon"><alert-two-tone class="aut-icon"></alert-two-tone></div><div class="icon-text">AlertTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('api-two-tone')"><div class="icon-icon"><api-two-tone class="aut-icon"></api-two-tone></div><div class="icon-text">ApiTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('appstore-two-tone')"><div class="icon-icon"><appstore-two-tone class="aut-icon"></appstore-two-tone></div><div class="icon-text">AppstoreTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('audio-two-tone')"><div class="icon-icon"><audio-two-tone class="aut-icon"></audio-two-tone></div><div class="icon-text">AudioTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('bank-two-tone')"><div class="icon-icon"><bank-two-tone class="aut-icon"></bank-two-tone></div><div class="icon-text">BankTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('bell-two-tone')"><div class="icon-icon"><bell-two-tone class="aut-icon"></bell-two-tone></div><div class="icon-text">BellTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('book-two-tone')"><div class="icon-icon"><book-two-tone class="aut-icon"></book-two-tone></div><div class="icon-text">BookTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('bug-two-tone')"><div class="icon-icon"><bug-two-tone class="aut-icon"></bug-two-tone></div><div class="icon-text">BugTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('build-two-tone')"><div class="icon-icon"><build-two-tone class="aut-icon"></build-two-tone></div><div class="icon-text">BuildTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('bulb-two-tone')"><div class="icon-icon"><bulb-two-tone class="aut-icon"></bulb-two-tone></div><div class="icon-text">BulbTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('calculator-two-tone')"><div class="icon-icon"><calculator-two-tone class="aut-icon"></calculator-two-tone></div><div class="icon-text">CalculatorTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('calendar-two-tone')"><div class="icon-icon"><calendar-two-tone class="aut-icon"></calendar-two-tone></div><div class="icon-text">CalendarTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('camera-two-tone')"><div class="icon-icon"><camera-two-tone class="aut-icon"></camera-two-tone></div><div class="icon-text">CameraTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('car-two-tone')"><div class="icon-icon"><car-two-tone class="aut-icon"></car-two-tone></div><div class="icon-text">CarTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('carry-out-two-tone')"><div class="icon-icon"><carry-out-two-tone class="aut-icon"></carry-out-two-tone></div><div class="icon-text">CarryOutTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('ci-circle-two-tone')"><div class="icon-icon"><ci-circle-two-tone class="aut-icon"></ci-circle-two-tone></div><div class="icon-text">CiCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('ci-two-tone')"><div class="icon-icon"><ci-two-tone class="aut-icon"></ci-two-tone></div><div class="icon-text">CiTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('cloud-two-tone')"><div class="icon-icon"><cloud-two-tone class="aut-icon"></cloud-two-tone></div><div class="icon-text">CloudTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('code-two-tone')"><div class="icon-icon"><code-two-tone class="aut-icon"></code-two-tone></div><div class="icon-text">CodeTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('compass-two-tone')"><div class="icon-icon"><compass-two-tone class="aut-icon"></compass-two-tone></div><div class="icon-text">CompassTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('contacts-two-tone')"><div class="icon-icon"><contacts-two-tone class="aut-icon"></contacts-two-tone></div><div class="icon-text">ContactsTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('container-two-tone')"><div class="icon-icon"><container-two-tone class="aut-icon"></container-two-tone></div><div class="icon-text">ContainerTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('control-two-tone')"><div class="icon-icon"><control-two-tone class="aut-icon"></control-two-tone></div><div class="icon-text">ControlTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('copyright-circle-two-tone')"><div class="icon-icon"><copyright-circle-two-tone class="aut-icon"></copyright-circle-two-tone></div><div class="icon-text">CopyrightCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('copyright-two-tone')"><div class="icon-icon"><copyright-two-tone class="aut-icon"></copyright-two-tone></div><div class="icon-text">CopyrightTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('credit-card-two-tone')"><div class="icon-icon"><credit-card-two-tone class="aut-icon"></credit-card-two-tone></div><div class="icon-text">CreditCardTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('crown-two-tone')"><div class="icon-icon"><crown-two-tone class="aut-icon"></crown-two-tone></div><div class="icon-text">CrownTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('customer-service-two-tone')"><div class="icon-icon"><customer-service-two-tone class="aut-icon"></customer-service-two-tone></div><div class="icon-text">CustomerServiceTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('dashboard-two-tone')"><div class="icon-icon"><dashboard-two-tone class="aut-icon"></dashboard-two-tone></div><div class="icon-text">DashboardTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('database-two-tone')"><div class="icon-icon"><database-two-tone class="aut-icon"></database-two-tone></div><div class="icon-text">DatabaseTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('dislike-two-tone')"><div class="icon-icon"><dislike-two-tone class="aut-icon"></dislike-two-tone></div><div class="icon-text">DislikeTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('dollar-circle-two-tone')"><div class="icon-icon"><dollar-circle-two-tone class="aut-icon"></dollar-circle-two-tone></div><div class="icon-text">DollarCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('dollar-two-tone')"><div class="icon-icon"><dollar-two-tone class="aut-icon"></dollar-two-tone></div><div class="icon-text">DollarTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('environment-two-tone')"><div class="icon-icon"><environment-two-tone class="aut-icon"></environment-two-tone></div><div class="icon-text">EnvironmentTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('euro-circle-two-tone')"><div class="icon-icon"><euro-circle-two-tone class="aut-icon"></euro-circle-two-tone></div><div class="icon-text">EuroCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('euro-two-tone')"><div class="icon-icon"><euro-two-tone class="aut-icon"></euro-two-tone></div><div class="icon-text">EuroTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('experiment-two-tone')"><div class="icon-icon"><experiment-two-tone class="aut-icon"></experiment-two-tone></div><div class="icon-text">ExperimentTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('eye-two-tone')"><div class="icon-icon"><eye-two-tone class="aut-icon"></eye-two-tone></div><div class="icon-text">EyeTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('eye-invisible-two-tone')"><div class="icon-icon"><eye-invisible-two-tone class="aut-icon"></eye-invisible-two-tone></div><div class="icon-text">EyeInvisibleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-add-two-tone')"><div class="icon-icon"><file-add-two-tone class="aut-icon"></file-add-two-tone></div><div class="icon-text">FileAddTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-excel-two-tone')"><div class="icon-icon"><file-excel-two-tone class="aut-icon"></file-excel-two-tone></div><div class="icon-text">FileExcelTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-exclamation-two-tone')"><div class="icon-icon"><file-exclamation-two-tone class="aut-icon"></file-exclamation-two-tone></div><div class="icon-text">FileExclamationTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-two-tone')"><div class="icon-icon"><file-two-tone class="aut-icon"></file-two-tone></div><div class="icon-text">FileTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-image-two-tone')"><div class="icon-icon"><file-image-two-tone class="aut-icon"></file-image-two-tone></div><div class="icon-text">FileImageTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-markdown-two-tone')"><div class="icon-icon"><file-markdown-two-tone class="aut-icon"></file-markdown-two-tone></div><div class="icon-text">FileMarkdownTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-pdf-two-tone')"><div class="icon-icon"><file-pdf-two-tone class="aut-icon"></file-pdf-two-tone></div><div class="icon-text">FilePdfTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-ppt-two-tone')"><div class="icon-icon"><file-ppt-two-tone class="aut-icon"></file-ppt-two-tone></div><div class="icon-text">FilePptTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-text-two-tone')"><div class="icon-icon"><file-text-two-tone class="aut-icon"></file-text-two-tone></div><div class="icon-text">FileTextTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-unknown-two-tone')"><div class="icon-icon"><file-unknown-two-tone class="aut-icon"></file-unknown-two-tone></div><div class="icon-text">FileUnknownTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-word-two-tone')"><div class="icon-icon"><file-word-two-tone class="aut-icon"></file-word-two-tone></div><div class="icon-text">FileWordTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('file-zip-two-tone')"><div class="icon-icon"><file-zip-two-tone class="aut-icon"></file-zip-two-tone></div><div class="icon-text">FileZipTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('filter-two-tone')"><div class="icon-icon"><filter-two-tone class="aut-icon"></filter-two-tone></div><div class="icon-text">FilterTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('fire-two-tone')"><div class="icon-icon"><fire-two-tone class="aut-icon"></fire-two-tone></div><div class="icon-text">FireTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('flag-two-tone')"><div class="icon-icon"><flag-two-tone class="aut-icon"></flag-two-tone></div><div class="icon-text">FlagTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('folder-add-two-tone')"><div class="icon-icon"><folder-add-two-tone class="aut-icon"></folder-add-two-tone></div><div class="icon-text">FolderAddTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('folder-two-tone')"><div class="icon-icon"><folder-two-tone class="aut-icon"></folder-two-tone></div><div class="icon-text">FolderTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('folder-open-two-tone')"><div class="icon-icon"><folder-open-two-tone class="aut-icon"></folder-open-two-tone></div><div class="icon-text">FolderOpenTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('frown-two-tone')"><div class="icon-icon"><frown-two-tone class="aut-icon"></frown-two-tone></div><div class="icon-text">FrownTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('funnel-plot-two-tone')"><div class="icon-icon"><funnel-plot-two-tone class="aut-icon"></funnel-plot-two-tone></div><div class="icon-text">FunnelPlotTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('gift-two-tone')"><div class="icon-icon"><gift-two-tone class="aut-icon"></gift-two-tone></div><div class="icon-text">GiftTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('gold-two-tone')"><div class="icon-icon"><gold-two-tone class="aut-icon"></gold-two-tone></div><div class="icon-text">GoldTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('hdd-two-tone')"><div class="icon-icon"><hdd-two-tone class="aut-icon"></hdd-two-tone></div><div class="icon-text">HddTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('heart-two-tone')"><div class="icon-icon"><heart-two-tone class="aut-icon"></heart-two-tone></div><div class="icon-text">HeartTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('home-two-tone')"><div class="icon-icon"><home-two-tone class="aut-icon"></home-two-tone></div><div class="icon-text">HomeTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('hourglass-two-tone')"><div class="icon-icon"><hourglass-two-tone class="aut-icon"></hourglass-two-tone></div><div class="icon-text">HourglassTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('idcard-two-tone')"><div class="icon-icon"><idcard-two-tone class="aut-icon"></idcard-two-tone></div><div class="icon-text">IdcardTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('insurance-two-tone')"><div class="icon-icon"><insurance-two-tone class="aut-icon"></insurance-two-tone></div><div class="icon-text">InsuranceTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('interaction-two-tone')"><div class="icon-icon"><interaction-two-tone class="aut-icon"></interaction-two-tone></div><div class="icon-text">InteractionTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('layout-two-tone')"><div class="icon-icon"><layout-two-tone class="aut-icon"></layout-two-tone></div><div class="icon-text">LayoutTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('like-two-tone')"><div class="icon-icon"><like-two-tone class="aut-icon"></like-two-tone></div><div class="icon-text">LikeTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('lock-two-tone')"><div class="icon-icon"><lock-two-tone class="aut-icon"></lock-two-tone></div><div class="icon-text">LockTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('mail-two-tone')"><div class="icon-icon"><mail-two-tone class="aut-icon"></mail-two-tone></div><div class="icon-text">MailTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('medicine-box-two-tone')"><div class="icon-icon"><medicine-box-two-tone class="aut-icon"></medicine-box-two-tone></div><div class="icon-text">MedicineBoxTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('meh-two-tone')"><div class="icon-icon"><meh-two-tone class="aut-icon"></meh-two-tone></div><div class="icon-text">MehTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('message-two-tone')"><div class="icon-icon"><message-two-tone class="aut-icon"></message-two-tone></div><div class="icon-text">MessageTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('mobile-two-tone')"><div class="icon-icon"><mobile-two-tone class="aut-icon"></mobile-two-tone></div><div class="icon-text">MobileTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('money-collect-two-tone')"><div class="icon-icon"><money-collect-two-tone class="aut-icon"></money-collect-two-tone></div><div class="icon-text">MoneyCollectTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('notification-two-tone')"><div class="icon-icon"><notification-two-tone class="aut-icon"></notification-two-tone></div><div class="icon-text">NotificationTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('phone-two-tone')"><div class="icon-icon"><phone-two-tone class="aut-icon"></phone-two-tone></div><div class="icon-text">PhoneTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('picture-two-tone')"><div class="icon-icon"><picture-two-tone class="aut-icon"></picture-two-tone></div><div class="icon-text">PictureTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('play-square-two-tone')"><div class="icon-icon"><play-square-two-tone class="aut-icon"></play-square-two-tone></div><div class="icon-text">PlaySquareTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('pound-circle-two-tone')"><div class="icon-icon"><pound-circle-two-tone class="aut-icon"></pound-circle-two-tone></div><div class="icon-text">PoundCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('printer-two-tone')"><div class="icon-icon"><printer-two-tone class="aut-icon"></printer-two-tone></div><div class="icon-text">PrinterTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('profile-two-tone')"><div class="icon-icon"><profile-two-tone class="aut-icon"></profile-two-tone></div><div class="icon-text">ProfileTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('project-two-tone')"><div class="icon-icon"><project-two-tone class="aut-icon"></project-two-tone></div><div class="icon-text">ProjectTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('property-safety-two-tone')"><div class="icon-icon"><property-safety-two-tone class="aut-icon"></property-safety-two-tone></div><div class="icon-text">PropertySafetyTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('pushpin-two-tone')"><div class="icon-icon"><pushpin-two-tone class="aut-icon"></pushpin-two-tone></div><div class="icon-text">PushpinTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('reconciliation-two-tone')"><div class="icon-icon"><reconciliation-two-tone class="aut-icon"></reconciliation-two-tone></div><div class="icon-text">ReconciliationTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('red-envelope-two-tone')"><div class="icon-icon"><red-envelope-two-tone class="aut-icon"></red-envelope-two-tone></div><div class="icon-text">RedEnvelopeTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('rest-two-tone')"><div class="icon-icon"><rest-two-tone class="aut-icon"></rest-two-tone></div><div class="icon-text">RestTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('rocket-two-tone')"><div class="icon-icon"><rocket-two-tone class="aut-icon"></rocket-two-tone></div><div class="icon-text">RocketTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('safety-certificate-two-tone')"><div class="icon-icon"><safety-certificate-two-tone class="aut-icon"></safety-certificate-two-tone></div><div class="icon-text">SafetyCertificateTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('save-two-tone')"><div class="icon-icon"><save-two-tone class="aut-icon"></save-two-tone></div><div class="icon-text">SaveTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('schedule-two-tone')"><div class="icon-icon"><schedule-two-tone class="aut-icon"></schedule-two-tone></div><div class="icon-text">ScheduleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('security-scan-two-tone')"><div class="icon-icon"><security-scan-two-tone class="aut-icon"></security-scan-two-tone></div><div class="icon-text">SecurityScanTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('setting-two-tone')"><div class="icon-icon"><setting-two-tone class="aut-icon"></setting-two-tone></div><div class="icon-text">SettingTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('shop-two-tone')"><div class="icon-icon"><shop-two-tone class="aut-icon"></shop-two-tone></div><div class="icon-text">ShopTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-two-tone')"><div class="icon-icon"><shopping-two-tone class="aut-icon"></shopping-two-tone></div><div class="icon-text">ShoppingTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('skin-two-tone')"><div class="icon-icon"><skin-two-tone class="aut-icon"></skin-two-tone></div><div class="icon-text">SkinTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('smile-two-tone')"><div class="icon-icon"><smile-two-tone class="aut-icon"></smile-two-tone></div><div class="icon-text">SmileTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('sound-two-tone')"><div class="icon-icon"><sound-two-tone class="aut-icon"></sound-two-tone></div><div class="icon-text">SoundTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('star-two-tone')"><div class="icon-icon"><star-two-tone class="aut-icon"></star-two-tone></div><div class="icon-text">StarTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('switcher-two-tone')"><div class="icon-icon"><switcher-two-tone class="aut-icon"></switcher-two-tone></div><div class="icon-text">SwitcherTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('tablet-two-tone')"><div class="icon-icon"><tablet-two-tone class="aut-icon"></tablet-two-tone></div><div class="icon-text">TabletTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('tag-two-tone')"><div class="icon-icon"><tag-two-tone class="aut-icon"></tag-two-tone></div><div class="icon-text">TagTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('tags-two-tone')"><div class="icon-icon"><tags-two-tone class="aut-icon"></tags-two-tone></div><div class="icon-text">TagsTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('thunderbolt-two-tone')"><div class="icon-icon"><thunderbolt-two-tone class="aut-icon"></thunderbolt-two-tone></div><div class="icon-text">ThunderboltTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('tool-two-tone')"><div class="icon-icon"><tool-two-tone class="aut-icon"></tool-two-tone></div><div class="icon-text">ToolTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('trademark-circle-two-tone')"><div class="icon-icon"><trademark-circle-two-tone class="aut-icon"></trademark-circle-two-tone></div><div class="icon-text">TrademarkCircleTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('trophy-two-tone')"><div class="icon-icon"><trophy-two-tone class="aut-icon"></trophy-two-tone></div><div class="icon-text">TrophyTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('unlock-two-tone')"><div class="icon-icon"><unlock-two-tone class="aut-icon"></unlock-two-tone></div><div class="icon-text">UnlockTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('usb-two-tone')"><div class="icon-icon"><usb-two-tone class="aut-icon"></usb-two-tone></div><div class="icon-text">UsbTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('video-camera-two-tone')"><div class="icon-icon"><video-camera-two-tone class="aut-icon"></video-camera-two-tone></div><div class="icon-text">VideoCameraTwoTone</div></div>
		<div class="icon-cell" @click="clickIcon('wallet-two-tone')"><div class="icon-icon"><wallet-two-tone class="aut-icon"></wallet-two-tone></div><div class="icon-text">WalletTwoTone</div></div>
	</div>
	
	
</div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		iconIndex: "search",
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	confirm4(){
		antd.Modal.confirm({
			title: 'Confirm',
			// icon: createVNode(ExclamationCircleOutlined),
			// icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
			// icon: Vue.createVNode(DiyIconsVue.AddLocation, {class: "aut-icon"}),
			icon: Vue.createVNode(AntdIconsVue.AccountBookFilled, {class: "aut-icon"}),
			content: 'Bla bla ...',
			okText: '确认',
			cancelText: '取消',
			maskClosable: true,
		});
	},
	clickIcon(icon) {
		this.iconIndex = icon;
		// console.log(icon)
	},
	
},
computed:{
	iconDemo(){
		return `<${this.iconIndex} class="aut-icon"></${this.iconIndex}>`;
	}
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(DiyIconsVue)) {app.component(key, component)};
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");

// console.log(Object.keys(window));
// console.log(DiyIconsVue);
// console.log(AntdIconsVue);

// 如果从网站上获取：
// https://www.antdv.com/components/icon-cn/
// 双色风格========cl1:#e6f7ff======cl2:#1890ff====================================  ==================================================
// document.getElementsByClassName('anticons-list')[0].children[0].lastChild.children[0].textContent		//'UpCircleTwoTone'
// document.getElementsByClassName('anticons-list')[0].children[0].firstChild.firstChild.children[0].attributes.fill.value		//'#e6f7ff'
// document.getElementsByClassName('anticons-list')[0].children[0].firstChild.firstChild.children[0].attributes.d.value		'M512 140c-205.4 0-372 166.6...'
//获取第一个ul下的所有icon数据：“双色风格”
// let arr_li = document.getElementsByClassName("anticons-list")[0].children;
// let ret = '';
// for(var li in arr_li){
// 	if(typeof arr_li[li] == 'object'){
// 		let name = arr_li[li].lastChild.children[0].textContent;
// 		let paths = arr_li[li].firstChild.firstChild.children;
// 		// console.log(paths);
// 		let str1 = `${name}: [`;
// 		let str2 = '';
// 		// console.log(str1);
// 		for(var path in paths){
// 			if(typeof paths[path] == 'object'){
// 				let fill = paths[path].attributes.fill.value;
// 				let d = paths[path].attributes.d.value;
// 				str2 = `${str2}
// 	{fill: "${fill}", d: "${d}"},`;
// 				// console.log(d);
// 			}
// 		}
// 		let one_icon = `${str1}${str2.slice(0, -1)}
// ],`;
// 		ret = `${ret}
// ${one_icon}`;
// 	}
// }
// console.log(ret);

//获取第一个ul下的所有icon名称（转换为横杠方式）：“实底风格”
// let n = 0;
// let arr_li = document.getElementsByClassName("anticons-list")[n].children;
// function to_bar_name(str) {
// 	let result = '';for (let i = 0; i < str.length; i++) {const char = str[i];if (char === char.toUpperCase() && i !== 0) {result += '-';}result += char.toLowerCase();}
// 	return result;
// }
// let ret = '';
// for(var li in arr_li){
// 	if(typeof arr_li[li] == 'object'){
// 		let name = arr_li[li].lastChild.children[0].textContent;
// 		let name_bar = to_bar_name(name);
// 		ret = `${ret}
// <div class="icon-cell" @click="clickIcon('${name_bar}')"><div class="icon-icon"><${name_bar} class="aut-icon"></${name_bar}></div><div class="icon-text">${name}</div></div>`;
// 	}
// }
// console.log(ret);

</script>
</html>
